<template>
  <div>
    <div class="client-detail-container">
      <a-descriptions title="服务单详情" class="description-container">
        <a-descriptions-item label="报修人员">{{clientData.repairman}}</a-descriptions-item>
        <a-descriptions-item label="联系方式">{{clientData.phoneNumber}}</a-descriptions-item>
        <a-descriptions-item label="企业名称">{{clientData.companyName}}</a-descriptions-item>
        <a-descriptions-item label="机床编号">{{clientData.macNumb}}</a-descriptions-item>
        <a-descriptions-item label="机床型号">{{clientData.macType}}</a-descriptions-item>
        <a-descriptions-item label="机床厂家">{{clientData.macFactory}}</a-descriptions-item>
        <a-descriptions-item label="报单人员">{{clientData.role}}</a-descriptions-item>
        <a-descriptions-item label="机床位置">{{clientData.address}}</a-descriptions-item>
        <a-descriptions-item label="报修机床厂">{{clientData.repairCompany}}</a-descriptions-item>
        <a-descriptions-item label="设备购买时间">{{clientData.purchaseTime}}</a-descriptions-item>
        <a-descriptions-item label="详细地址" span="2">{{clientData.fullAddress}}</a-descriptions-item>
        <a-descriptions-item label="订单编号">{{clientData.repairOrderNumber}}</a-descriptions-item>
        <a-descriptions-item label="故障描述" span="2">{{clientData.description}}</a-descriptions-item>
        <a-descriptions-item label="系统型号" span="2">{{clientData.ncSystemType}}</a-descriptions-item>
        <a-descriptions-item label="图 片" class="">
          <div class="picture-container">
            <a-upload list-type="picture-card" :file-list="fileList"
                      class="picture-upload-container" @preview="handlePreview">
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-descriptions-item>
      </a-descriptions>
      <div class="client-detail-copy" @click="handleCopy">复制工单</div>
    </div>
    <div class="client-step-container">
      <div class="client-bill-title">服务单进度</div>
      <a-steps>
        <a-step status="finish" v-for="item in processData" :key="item.time" class="single-step">
          <span slot="title" class="process-title">{{item.title}}</span>
          <a-icon slot="icon" :type="item.icon" />
          <div slot="description" class="finish-desc">{{item.desc}}</div>
          <div slot="description" class="finish-time">{{item.time}}</div>
        </a-step>
      </a-steps>
    </div>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  export default {
    name: "ClientDetail",
    data () {
      return {
        clientData: {},
        processData: {},
        fileList: [],
        previewVisible: false,
        previewImage: ''
      }
    },
    methods: {
      // 根据订单编号获取售后详情;
      async getClientDetail (orderNumber) {
        const res = await api.reqClientDetail({repairOrderNumber: orderNumber});
        if (res.MsgCode !== 0) {
          return
        }
        this.clientData = res.Data;
        let urlArray = [];
        urlArray.push(res.Data.pictureUrl);
        let urlValue;
        //获取图片url；
        let lastUrl = [];
        for (let i = 0; i < urlArray.length; i++) {
          for (let k in urlArray[i]) {
            urlValue = urlArray[i][k];
            lastUrl.push(GLOBAL.imgDownUrl + urlArray[i][k]);
          }
        }
        const fileList = lastUrl.map((item, index) => {
          return {
            uid: -index,
            name: 'image.png',
            url: item,
            status: 'done'
          }
        });
        this.fileList = fileList;
      },
      // 根据订单编号获取订单流水;
      async getClientProcess (orderNumber) {
        const res = await api.reqClientProcess({repairOrderNumber: orderNumber});
        if (res.MsgCode !== 0) {
          return
        }
        console.log(res.Data);
        for (let i = 0; i < res.Data.length; i++) {
          if (res.Data[i].endState === 1) {
            res.Data[i].appointorName = "";
            res.Data[i].title = "已报单";
            res.Data[i].icon = "user";
            res.Data[i].desc = "报修订单提交成功："+ res.Data[i].name + "(" + res.Data[i].username +")";
          } else if (res.Data[i].endState === 2) {
            res.Data[i].appointorName = res.Data[i].appointor;
            res.Data[i].title = "已指派";
            res.Data[i].icon = "right-square";
            res.Data[i].desc = "已指派工程师：" + res.Data[i].operator + "(" + res.Data[i].phoneNumber + ")";
          } else if (res.Data[i].endState === 3) {
            res.Data[i].appointorName = res.Data[i].operator;
            res.Data[i].title = "已转单";
            res.Data[i].icon = "export";
            res.Data[i].desc = "已转单工程师：" + res.Data[i].operator + "(" + res.Data[i].phoneNumber + ")";
          } else if (res.Data[i].endState === 100) {
            res.Data[i].appointorName = res.Data[i].operator;
            res.Data[i].title = "废单";
            res.Data[i].icon = "stop";
            res.Data[i].desc = "工程师：" + res.Data[i].operator + "(" + res.Data[i].phoneNumber + ")执行废单操作" + " (备注:" + res.Data[i].wasterRemark + ")";
          } else {
            res.Data[i].appointorName = "";
            res.Data[i].desc = "";
          }
        }
        this.processData = res.Data;
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleCancel () {
        this.previewVisible = false;
      },
      // 复制工单;
      handleCopy () {
        console.log(this.clientData);
        // 先将数据存入缓存;
        localStorage.setItem('copyData', JSON.stringify(this.clientData));
        // 再跳转到故障报修页;
        window.open('/#/repair?id=1');
        this.handleChangeRouter('/repair');
      },
      ...mapMutations(['handleChangeRouter']),
    },
    mounted () {
      // 获取链接参数username值，然后存进内存中
      const orderNumber = this.$route.query.orderNumber;
      console.log('orderNumber',orderNumber);
      this.getClientDetail(orderNumber);
      this.getClientProcess(orderNumber);
    }
  }
</script>

<style scoped="scoped">
  @import "./components/style.css";
</style>
